<template>
    <div class="main">
        <!-- 头部 -->
        <header>
            <el-button type="warning" @click="clearPaper">
                清空纸张
            </el-button>
            <el-button type="info" @click="exportJson">
                导出模板 json
            </el-button>
            <el-button type="primary" @click.stop="print">
                浏览器打印
            </el-button>
            <el-button type="success" @click="print2">
                直接打印(需要连接客户端)
            </el-button>
        </header>
        <!-- 内容区 -->
        <div class="content">
            <!-- 左侧菜单 -->
            <aside class="left">
                <div id="provider-container1"></div>
                <div id="provider-container2"></div>
            </aside>
            <!-- 设计器的 容器 -->
            <main class="center">
                <!-- 设计器的 容器 -->
                <div id="hiprint-printTemplate"></div>
            </main>
            <!-- 元素参数的 容器 -->
            <aside class="right">
                <div id="PrintElementOptionSetting"></div>
            </aside>
        </div>
    </div>
</template>


<script setup>
import { invoke } from "@tauri-apps/api/tauri";
import { onMounted, getCurrentInstance, reactive,ref } from "vue";
import { hiprint } from "vue-plugin-hiprint";
import { provider1 } from "@/components/provider1";
import { provider2 } from "@/components/provider2";
import { newHiprintPrintTemplate } from "@/utils/template-helper";

const TEMPLATE_KEY = getCurrentInstance().type.name; // 存储模板对象的 key

let template = reactive({
    panels: []
});

let printData = reactive({
    table: [],
    qrcode: "",
    barcode: ""
});

async function get_template1() {
    await invoke("data_py").then((result) => {
        let data = JSON.parse(result);
        // console.log(data);
        for (let i = 0; i < data.length; i++) {
            printData.table.push(data[i]);
        }
        printData.qrcode = "cn147258";
        printData.barcode = "pl1234567890";
        // printData.table.push(data);
        // console.log(printData);
    });
}

async function get_template() {
    await invoke("template_txt").then((result) => {
        let data = JSON.parse(result);
        template.panels.push(data.panels[0]);
    });
}

// 自定义传入 provider 的参数
let options = {
    config: { tid: "providerModule1.config", },
};
// 初始化 provider
hiprint.init({
    providers: [provider1(options), provider2(options)],
});
/**
 * 这里必须要在 onMounted 中去构建 左侧可拖拽元素 或者 设计器
 * 因为都是把元素挂载到对应容器中, 必须要先找到该容器
 */
onMounted(() => {
    buildLeftElement();
    buildDesigner();

});
/**
 * 构建左侧可拖拽元素
 * 注意: 可拖拽元素必须在 hiprint.init() 之后调用
 * 调用之前 可以先 console.log($("#hiprint-printTemplate")) 看看是否有该 dom
 */
const buildLeftElement = () => {
    $("#provider-container1").empty(); // 先清空, 避免重复构建
    hiprint.PrintElementTypeManager.build($("#provider-container1"), "providerModule1");
    $("#provider-container2").empty(); // 先清空, 避免重复构建
    hiprint.PrintElementTypeManager.build($("#provider-container2"), "providerModule2");
};
/**
 * 构建设计器
 * 注意: 必须要在 onMounted 中去构建
 * 因为都是把元素挂载到对应容器中, 必须要先找到该容器
 */
let hiprintTemplate;

const buildDesigner = async () => {
    await get_template();
    $("#hiprint-printTemplate").empty(); // 先清空, 避免重复构建
    hiprintTemplate = newHiprintPrintTemplate(TEMPLATE_KEY, {
        template: template, // 模板json(object)
        settingContainer: "#PrintElementOptionSetting", // 元素参数容器
    });
    // 构建 并填充到 容器中
    hiprintTemplate.design("#hiprint-printTemplate");
};

/**
 * 浏览器打印
 */
const print = async () => {
    await get_template1();
    // 参数: 打印时设置 左偏移量，上偏移量
    let options = { leftOffset: -1, topOffset: -1 };
    // 扩展
    let ext = {
        callback: () => {
            console.log("浏览器打印窗口已打开");
        },
        styleHandler: () => {
            // 重写 文本 打印样式
            return "<style>.hiprint-printElement-text{color:red !important;}</style>";
        },
    };
    // 调用浏览器打印
    hiprintTemplate.print(printData, options, ext);
};
/**
 * 直接打印: 借助客户端,静默打印(无弹窗直接打印)
 * 注意: 需要先连接客户端
 */
const print2 = () => {
    if (hiprint.hiwebSocket.opened) {
        hiprintTemplate.print2(printData);
    } else {
        alert("请先连接客户端(刷新网页), 然后再点击「直接打印」");
    }
};
// ----------------- 模板对象 api 部分 -----------------

/**
 * 清空所有元素
 */
const clearPaper = () => {
    hiprintTemplate.clear();
};
/**
 * 导出模板 json
 * 必须确保 hiprintTemplate 已成功创建
 */

async function save_template(json) {
    await invoke("save_json", { jsonStr: json }).then((result) => {
        alert("保存成功!");
    }).catch((er) => {
        alert(er)
    });
}

const exportJson = async () => {
    let json = hiprintTemplate.getJson();
    // 转为字符串
    json = JSON.stringify(json);
    await save_template(json);
    // console.log(json);
    // alert("导出成功! 请查看控制台输出");
};

</script>

<style lang="css" scoped>
.main {
    height: 100%;
    width: 100%;
}

header {
    display: flex;
    justify-content: space-between;
    height: 50px;
}

.content {
    display: flex;
    height: calc(100% - 55px);
}

.left {
    flex: 1;
    margin-right: 15px;
}

.center {
    flex: 5;
}

.right {
    flex: 2;
}
</style>